<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                <el-breadcrumb-item>意向单列表</el-breadcrumb-item>
            </el-breadcrumb>


            <div class="handleBox">
                <span>业务员：</span><el-select v-model="selectSaleUserId" placeholder="请选择" @change="selectUser"
                    size="small">
                    <el-option v-for="item in saleUserList" :key="item.userId" :label="item.userName"
                        :value="item.userId">
                    </el-option>
                </el-select>
            </div>



            <el-table :data="auditList" border style="width: 100%" height="670"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="userName" label="客户名称" width="110"></el-table-column>
                <el-table-column prop="userTel" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="putMoney" label="预算" width="60"></el-table-column>
                <el-table-column prop="putAdv" label="广告内容"></el-table-column>
                <el-table-column label="投放时间" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="putDate" label="提交时间" width="100"></el-table-column>
                <el-table-column prop="payDate" label="支付时间" width="100"></el-table-column>
                <el-table-column prop="shopTotal" label="预选门店数" width="100"></el-table-column>
                <el-table-column prop="promoterName" label="所属业务员"></el-table-column>
                <el-table-column prop="receiptContent" label="回执单内容"></el-table-column>
                <el-table-column label="是否已支付定金" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.payStatus == 1">已支付</el-tag>
                        <el-tag type="danger" v-else>未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.isPut == 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.isPut == 0">未审核</el-tag>
                        <el-tag v-else-if="scope.row.isPut == 2">已过期</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否已联系" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.isContact == 1">是</el-tag>
                        <el-tag type="danger" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="380" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="scope.row.isContact != 1"
                            @click="userHandle(scope.row, 'call')">联系Ta</el-button>
                        <el-button size="mini" @click="userHandle(scope.row, 'receipt')">发送回执单</el-button>
                        <el-button size="mini" v-if="scope.row.isPut != 1"
                            @click="userHandle(scope.row, 'check')">审核</el-button>
                        <el-button size="mini" @click="userHandle(scope.row, 'checkShop')">查看所选店铺</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 投放店铺列表 -->
            <el-dialog title="店铺列表" :visible.sync="dialogVisible" width="76%" top="4%" :before-close="handleClose">
                <div>
                    累计选择：{{ shopList.length }}家
                </div>
                <el-table :data="shopList" border :header-cell-style="{ background: '#409EFF', color: '#FFF' }"
                    height="650">
                    <el-table-column prop="shopId" label="ID"></el-table-column>
                    <el-table-column prop="shopName" label="店铺名称"></el-table-column>
                    <el-table-column prop="shopUser" label="门店所有人"></el-table-column>
                    <el-table-column prop="shopTel" label="联系方式"></el-table-column>
                    <el-table-column label="区域">
                        <template slot-scope="scope">
                            {{ scope.row.shopRegion | getRegion }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="shopAddr" label="位置"></el-table-column>
                    <el-table-column prop="shopArea" label="店铺面积(㎡)"></el-table-column>
                    <el-table-column prop="shopStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.shopStatus == 1">已投放</el-tag>
                            <el-tag type="success" v-else-if="scope.row.shopStatus == 0">未投放</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.shopStatus == 2">已占用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shopDayNum" label="日平均人数"></el-table-column>
                    <el-table-column prop="shopLevelText" label="消费档次"></el-table-column>
                    <el-table-column prop="shopTables" label="桌数(桌)"></el-table-column>
                    <el-table-column label="店铺性质" width="400">
                        <template slot-scope="scope">
                            <el-tag v-for="(item, index) in scope.row.targetList" :key="index" style="margin: 4px ;">
                                {{ item }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>

            <!-- 回执单 -->
            <el-dialog title="回执单" :visible.sync="receiptDia" width="20%" top="4%" :before-close="receHandleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="回执单" prop="content">
                        <el-input type="textarea" rows='6' v-model="form.content" placeholder="请输入回执单内容"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="receHandleClose">取 消</el-button>
                    <el-button type="primary" @click="contentSub">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>
<script>

import { listMyUserPut, listMyPutShop } from '../../network/mobile'
import { conditionList } from '../../utils/conditionList'
import { getSaleUserOrder, updateUserPutIsContant, updateUserPutReceiptContent, applyUserPut } from '../../network/auditing'
import { getSaleUser } from '../../network/preparer'
export default {
    name: 'couInfo',
    data() {

        // 意向单状态   isPut  0 未审核  1 已审核   2 已过期

        return {
            auditList: [],
            shopList: [],
            dialogVisible: false,
            receiptDia: false,
            form: {
                content: '',
            },
            rules: {
                content: [
                    { required: true, message: '请输入回执单内容', trigger: 'blur' },
                ],
            },
            selectRecord: '',
            saleUserList: [],//推广员列表
            selectSaleUserId: 0,
            oldList: [],//原始数据
        }
    },
    created() {
        this.getSaleUserOrder()

        this.getSaleUser()
    },
    methods: {
        // 提交回执单
        contentSub() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) return
                updateUserPutReceiptContent({
                    recordId: this.selectRecord.recordId,
                    receiptContent: this.form.content
                }).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.getSaleUserOrder();
                        this.receHandleClose();
                        this.$message.success("发送成功");
                    } else {
                        console.log(res);
                        this.$message.success("发送失败");
                    }
                });
            });
        },
        // 关闭回执单弹窗
        receHandleClose() {
            this.receiptDia = false
            this.$refs.ruleForm.resetFields()
        },

        userHandle(obj, flag) {
            if (flag == 'call') {
                this.$confirm('是否已联系客户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateUserPutIsContant({
                        recordId: obj.recordId
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('记录成功')
                            this.getSaleUserOrder()
                        } else {
                            this.$message.warning('记录失败，请重试')
                        }
                    })

                }).catch(() => {
                });
            } else if (flag == 'receipt') {

                this.selectRecord = obj
                this.receiptDia = true

            } else if (flag == 'checkShop') {
                listMyPutShop({
                    recordId: obj.recordId
                }).then(res => {
                    if (res.flag) {
                        console.log(res);
                        this.dataHandle(res.data)
                    } else {
                        this.$message.warning('查询失败，请重试')
                    }
                })
            } else if (flag == 'check') {
                this.$confirm('请确认是否已与客户签订协议，此操作不可更改，请谨慎操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    applyUserPut({
                        recordId: obj.recordId
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('审核成功')
                            this.getSaleUserOrder()
                        } else {
                            this.$message.warning('审核失败，请重试')
                        }
                    })
                }).catch(() => {
                });

            }
        },


        // 获取意向单列表
        getSaleUserOrder() {
            getSaleUserOrder({
                promoterId: 0
            }).then(res => {
                if (res.flag) {
                    res.data.sort((a, b) => {
                        return b.recordId - a.recordId
                    })
                    this.oldList = JSON.parse(JSON.stringify(res.data))
                    console.log(res);

                    this.auditList = res.data
                }
            })
        },

        // 审核意向单
        auditHandle(obj) {
            console.log(obj);
            this.$confirm('是否通过该意向单?', '意向单审核', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('审核通过')
                obj.isPut = 1
            }).catch(() => {
            });
        },


        dataHandle(allShopList) {
            this.shopList = []
            allShopList.forEach((ele, index) => {
                ele.shopTarget = ele.shopTarget.split(',')
                ele.targetList = []
                ele.shopLevelText = ''
                ele.shopTarget.forEach((target) => {
                    conditionList[1].list.forEach(con => {
                        if (target == con.targetId) {
                            ele.targetList.push(con.text)
                        }
                    })
                })
                conditionList[2].list.forEach(level => {
                    if (ele.shopLevel == level.levelId) {
                        ele.shopLevelText = level.text
                    }
                })
                ele.shopLevel = Number(ele.shopLevel)
            })
            this.shopList = [...allShopList]

            console.log(this.shopList);

            this.dialogVisible = true

        },

        handleClose() {
            this.dialogVisible = false
        },
        getSaleUser() {
            getSaleUser({
                companyId: 0,
                flag: 1  //  0 进销存查询人员  1 广告牌查询人员
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.saleUserList = res.data.filter(item => {
                        return item.userTag == -2
                    })

                    this.saleUserList.unshift({
                        userId: 0,
                        userName: '全部',
                    })
                }
            })
        },

        selectUser() {
            if (this.selectSaleUserId == 0) {
                this.auditList = this.oldList
            } else {
                this.auditList = this.oldList.filter(item => {
                    return item.promoterId == this.selectSaleUserId
                })
            }
        },


    },
    filters: {
        getRegion(val) {
            var name = ''
            conditionList[0].list.forEach(item => {
                if (val == item.regionId) {
                    name = item.text
                }
            })
            return name
        }
    }
}
</script>

<style lang="less" scoped>
.handleBox {
    margin: 15px 0;
}
</style>